<template>
    <div class="zy-content">
        <div class="searchBox search-box-layout">
            <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="handleAdd">
                    新增
                </Button>

            </div>
            <div class="tableContent" :style="{ height: tableHeight + 'px' }">
                <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="handleEditRow(row,true)"><i
                                class="iconfont zy-common-bianji"></i>BOM关联</span>
                        <span class="operationBtn" @click="handleEditRow(row)"><i
                                class="iconfont zy-common-bianji"></i>编辑</span>
                        <span class="operationBtn" @click="handleDeleteRow(row)"><i
                                class="iconfont zy-common-shanchu"></i>删除</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" />
                <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"
                    @on-page-size-change="changePageSize" show-sizer />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.sureDelete') }}</span>
            </p>
            <div slot="footer">

                <Button type="default" @click="deleteShow = false">取消</Button>
                <Button type="primary" @click="handleDeleteSure">确定</Button>
            </div>
        </Modal>


        <CreateOrUpdateModal :visible="createStatus" :form="form" :title="form.id ? '编辑' : '新增'"
            @update:visible="createStatus = $event" :handleAddSubmit="handleAddSubmit"
            :materialList="materialList"
            />
        <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
            @importExcelChange="importExcelChange">
        </importExcelModal>
        <DrawerProcess
        :drawerVisible="drawerVisible"
        :drawerClose="drawerClose"
        :currentItem="currentItem"
        :processList="processList"
        :processTotal="processTotal"
        :materialData="materialData"
         :productProcess='productProcess'
        />
    </div>
</template>

<script>
import ImportExcelModal from '@/components/importExcel.vue';
import DrawerProcess from "./drawerProcess";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import CreateOrUpdateModal from './modal_open.vue';
import {materialApi,editApi,addApi,deleteApi ,productApi} from '@/api/dataBasic/productBOM'
import { productApi as productApis, materialAllApi } from '@/api/dataBasic/materialBom'
export default {
    name: "list.vue",
    components: { ImportExcelModal, search, CreateOrUpdateModal ,DrawerProcess},
    mixins: [toggleTableOperation],
    data() {
        return {
            params: {
                pageSize: 20,
                current: 1
            },
            searchData: [
                {
                    title: "物料bom名称",
                    key: "materialBomName",

                },
                {
                    title: "物料bom版本",
                    key: "materialBomVersion"
                },


            ],
            columns: [
                {
                    title: '物料bom名称',
                    key: 'materialBomName',
                    align: 'center',

                    resizable: true
                },
                {
                    title: '物料bom版本',
                    key: 'materialBomVersion',
                    align: 'center',

                    resizable: true
                }, {
                    title: '产品名称',
                    key: 'productId',
                    align: 'center',
                    render: (h, params) => {
                        const name = this.materialList.find(i => i.id === params.row.productId)
                        return h('div', name.productName);
                    }
                },
                {
                    title: "操作",
                    slot: "action",
                    fixed: "right",
                    width: 350,
                    align: "center"
                }
            ],
            importExcelState: false,
            list: [],
            total: 0,
            deleteShow: false,
            currentItem: {},
            createStatus: false,
            form: {},
            nameList: [],
            searchParams: {},
            materialList:[],
            drawerVisible:false,
            processList: [],
            processTotal:0,
            materialData:[]
        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 400;
        }
    },

    mounted() {
        this.getList()
 this.relevance()
    },
    methods: {

        productProcess(query){
            productApis(query).then(res=>{
                this.processList=res.data.records;
                this.processTotal=res.data.total;
                })
        },
        drawerClose(){
            this.drawerVisible=false
           },
                relevance(){
                    materialAllApi().then(res=>{
                        if(res.code===200){
              this.materialData=res.data
                }
                    })
            materialApi().then(res=>{
                if(res.code===200){
              this.materialList=res.data
                }
            })
        },
        getSearch(arg) {
            this.searchParams = arg[0] || {};
            this.getList();
        },

        importExcelChange(val) {
            this.importExcelState = false;
            if (val === 'success') {
                this.$Message.success('导入成功!');
                this.changeNum();
            }
        },
        async getList() {
            try {
                const response = await productApi({ ...this.params, ...this.searchParams })
                if (response.code === 200) {
                    this.list = response.data.records;
                    this.total = response.data.total;
                } else {
                    this.$Message.warning(response.message);
                }
            } catch (error) {
                console.error(error);
                this.$Message.error('获取列表失败');
            }
        },
        reset() {
            this.params = { pageSize: 20, current: 1 };
            this.getList();
        },
        changeNum() {
            this.params.current = 1;
            this.params.pageSize = 20;
            this.getList();
        },
        handleAdd() {
            this.form = {};
            this.createStatus = true;
        },

        handleImportData() {
            this.importExcelState = true;
        },
        handleAddSubmit() {
            const url = this.form.id ? editApi :addApi;
            url(this.form).then(res => {

                    this.currentItem = {};
                    this.createStatus = false;
                    this.getList();
                })
                .catch(error => {
                    console.error('Error submitting form:', error);

                });

        },
        handleEditRow(row,flag) {
            if(flag){
               this.productProcess({
                 materialBomId:row.id,
                    current: 1,pageSize:10})
                this.currentItem = row;
              this.drawerVisible=true
              return
            }
            this.form = { ...row };
            this.createStatus = true;
        },
        handleDeleteRow(row) {
            this.currentItem = row;
            this.deleteShow = true;
        },
        handleDeleteSure() {

            deleteApi({ids:[this.currentItem.id]}).then(res => {
                    if (res.code === 200) {

                        this.currentItem = {};
                        this.deleteShow = false;
                        this.getList();
                    } else {
                        this.$Message.warning(res.message);
                    }
                });
        },
        changePageNum(val) {
            this.params.current = val;
            this.getList();
        },
        changePageSize(val) {
            this.params.pageSize = val;
            this.getList();
        }
    }
}
</script>

<style scoped>
.tableContent {}
</style>
